<template>
  <a-modal
    title="券信息"
    class="customHeight modal_title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="close"
  >
    <a-spin :spinning="confirmLoading">
      <div>
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item label="优惠券">
                <a-input
                  placeholder="请输入优惠券券号"
                  v-model="queryParam.couponNum"
                  :maxLength="20"
                  style="width: 100%"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="会员名称">
                <a-input
                  placeholder="请输入会员名称"
                  v-model="queryParam.memberInfo"
                  :maxLength="20"
                  style="width: 100%"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="2" style="padding-top:4px;">
              <a-button type="primary" @click="searchQuery" class="query"
                  ><i class="iconfont iconsearch"></i>查询</a-button
                >
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div style="padding: 10px 0; color: rgba(0, 0, 0, 0.85)">发券信息：</div>
      <div>
        <a-table
          class="tdclass"
          ref="table"
          size="middle"
          bordered
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无此图片</span>
            <img
              v-else
              :src="getImgView(text)"
              height="25px"
              alt="图片不存在"
              style="max-width: 80px; font-size: 12px; font-style: italic"
            />
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无此文件</span>
            <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="uploadFile(text)"
              >下载</a-button
            >
          </template>
          <template slot="sumNumber" slot-scope="text, record">
            <a @click="handleDetail(record)">{{ text }}</a>
          </template>
        </a-table>
      </div>
    </a-spin>
    <template slot="footer">
      <a-button type="default" @click="close">{{$t('关闭')}}</a-button>
    </template>
  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'PortraitCouponModal',
  mixins: [JeecgListMixin],
  data() {
    return {
      width: 1200,
      visible: false,
      confirmLoading: false,
      columns: [
        {
          title: '券号',
          align: 'center',
          dataIndex: 'couponNum',
        },
        {
          title: '券名称',
          align: 'center',
          dataIndex: 'couponName',
        },
        {
          title: '有效期',
          align: 'center',
          dataIndex: 'schStartDate',
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'state',
        },
        {
          title: '发放时间',
          align: 'center',
          dataIndex: 'produceTime',
        },
        {
          title: '会员手机号',
          align: 'center',
          dataIndex: 'memberPhone',
        },
        {
          title: '会员卡号',
          align: 'center',
          dataIndex: 'memberCardNo',
        },
        {
          title: '会员姓名',
          align: 'center',
          dataIndex: 'memberName',
        },
        {
          title: '核销时间',
          align: 'center',
          dataIndex: 'useTime',
        },
      ],
      url: {
        list: '/coupon/manual/getdetail',
      },
      model: {},
      isCustom: true,
    }
  },
  methods: {
    edit(record) {
      let that = this
      that.model = Object.assign({}, record)
      console.log(that.model)
      that.queryParam.recordId = that.model.id
      that.searchQuery()
      that.visible = true
    },
    searchQuery() {
      let that = this
      that.queryParam.recordId = that.model.id
      that.loadData()
    },
    close: function () {
      let that = this
      that.visible = false
    },
  },
}
</script>